<template>
    <!-- 登陆前 -->
    <div class="course" v-if="!isLogin">
        <div class="not-title">消息</div>
        <div class="not-login">
            <div class="not-icon"></div>
            <div class="not-text1">您还未登录</div>
            <div class="not-text2">登陆后,您可以查看收到的信息</div>
            <div class="not-btn" @click="goLogin">立即登录</div>
        </div>
    </div>
    <!-- 登陆后 -->
    <div class="courseUser">
        <div class="title">消息(0)</div>
        <div class="courseUser-tab">
            <div class="tab-item" v-for="(item,index) in Message.topRecords" :key="index">
                <div class="tab-item-icon">
                    <img class="auto-img" :src="item.icon" alt="">
                </div>
                <div class="tab-item-text">{{item.name}}</div>
            </div>
        </div>
        <ul class="Records">
            <li v-for="(item,index) in Message.listRecords" :key="index">
                <div class="Records-icon">
                    <img class="auto-img" :src="item.icon" alt="">
                </div>
                <div class="Records-text">
                    <p>{{item.name}}</p>
                    <div>{{item.summary}}</div>
                </div>
            </li>
        </ul>
    </div>
</template>

<script setup lang="ts">
import { reactive, onMounted, ref } from 'vue'
import { getMessageIcon } from '@/api/api'
import type { MessageIconList } from '@/tsList/homeFunts'
import { useRouter } from 'vue-router'

//引入pinia
import { storeToRefs } from "pinia"
//引入pinia文件
import { useAdmin } from "@/stores/counter"

//使用pinia
const store = useAdmin()  //使用公开的方法
let { userData } = storeToRefs(store)  //拿到方法里定义的值

let router = useRouter();

const isLogin = ref(false)
const userLogin = reactive({
    token: ''
})

const Message = reactive<MessageIconList>({
    listRecords: [],
    topRecords: []
})

function goLogin() {
    router.push({
        //传递参数使用query的话，指定path或者name都行，但使用params的话，只能使用name指定 
        path: '/LoginView',
    })
}

onMounted(() => {
    // let lastname = JSON.parse(localStorage.userInfo);
    let lastname = JSON.parse(JSON.stringify(localStorage.getItem("userInfo")));

    if (lastname != null) {
        isLogin.value = true
        userLogin.token = lastname.token
    }
    getMessageIcon().then((res) => {
        console.log('消息图标', res.data);
        Message.listRecords = res.data.listRecords
        Message.topRecords = res.data.topRecords
    })
})

</script>

<style lang="less" scoped>
.auto-img {
    width: 100%;
    height: 100%;
    display: block;
}

.course {
    height: 100vh;
    padding: 0 10px;
    background-color: white;

    .not-title {
        display: flex;
        justify-content: center;
        padding: 10px 0;
        font-weight: 600;
        font-size: 16px;
    }

    .not-login {
        height: 70%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        .not-icon {
            width: 205px;
            height: 170px;
            background-image: url('@/assets/background/od.png');
            background-size: cover;
        }

        .not-text1 {
            font-size: 18px;
            font-weight: 600;
            padding: 10px 0 0;
        }

        .not-text2 {
            padding: 0 0 15px;
            color: #999999;
        }

        .not-btn {
            width: 100%;
            background-color: #5b6cd4;
            height: 40px;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 3px;
        }
    }
}

.courseUser {
    min-height: 100vh;
    padding: 0 0 90px;
    .title {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20px 0;
        font-size: 16px;
        font-weight: 600;
    }

    .courseUser-tab {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 30px;

        .tab-item {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            .tab-item-icon {
                width: 40px;
                height: 40px;
                margin-bottom: 10px;
            }

            .tab-item-text {
                font-size: 12px;
            }
        }
    }

    .Records {
        padding: 20px 10px;

        li {
            height: 45px;
            display: flex;
            align-items: center;
            .Records-icon {
                width: 30px;
                height: 30px;
                border-radius: 999px;
                margin-right: 10px;
            }

            .Records-text {
                p {
                    font-size: 13px;
                }

                div {
                    font-size: 12px;
                    color: #999999;
                    transform: scale(.9);
                    transform-origin: 0 0;
                    font-weight: 200;
                }
            }
        }
    }
}
</style>